import { IRippleOptions } from '../ripple-types'

export const createContainer = ({ borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius }: CSSStyleDeclaration): HTMLElement => {
  const rippleContainer = document.createElement('div')
  rippleContainer.style.top = '0'
  rippleContainer.style.left = '0'
  rippleContainer.style.width = '100%'
  rippleContainer.style.height = '100%'
  rippleContainer.style.position = 'absolute'
  rippleContainer.style.borderRadius = `${borderTopLeftRadius} ${borderTopRightRadius} ${borderBottomRightRadius} ${borderBottomLeftRadius}`
  rippleContainer.style.overflow = 'hidden'
  rippleContainer.style.pointerEvents = 'none'

  // 兼容 ie  苹果
  rippleContainer.style.webkitMaskImage = '-webkit-radial-gradient(white, black)'

  return rippleContainer
}

export const createRippleElement = (x: number, y: number, size: number, options: IRippleOptions): HTMLElement => {
  const rippleElement = document.createElement('div')

  rippleElement.style.position = 'absolute'
  rippleElement.style.width = `${size}px`
  rippleElement.style.height = `${size}px`
  rippleElement.style.top = `${y}px`
  rippleElement.style.left = `${x}px`
  rippleElement.style.background = options.color
  rippleElement.style.borderRadius = '50%'
  rippleElement.style.opacity = `${options.initialOpacity}`
  rippleElement.style.transform = `translate(-50%,-50%) scale(0)`
  rippleElement.style.transition = `transform ${options.duration / 1000}s ${options.easing}, opacity ${options.duration / 1000}s ${options.easing}`
  return rippleElement
}

function magnitude(x1: number, y1: number, x2: number, y2: number): number {
  const deltaX = x1 - x2
  const deltaY = y1 - y2

  return Math.sqrt(deltaX * deltaX + deltaY * deltaY)
}

export function getToFurthestCorner(x: number, y: number, { width, height }: DOMRect): number {
  // 获取点击目标的位置到块级作用域边界的距离
  const topLeft = magnitude(x, y, 0, 0)
  const topRight = magnitude(x, y, width, 0)
  const bottomLeft = magnitude(x, y, 0, height)
  const bottomRight = magnitude(x, y, width, height)
  return Math.max(topLeft, topRight, bottomLeft, bottomRight)
}
